<template>
	<view class="main-class">
		<!-- <tn-sticky> -->
			<view class="header-class tn-flex justify-end" >
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>			
				<!-- <view class="tn-color-black_text tn-flex justify-between tn-text-xl tn-pl-xl tn-pr-xl tn-pb-xl" >
					<tn-icon name="left-arrow" size="40" @click="back"/>
					<span>购物车详情</span>
					<tn-icon name="title" size="40" />
				</view> -->
				<tn-navbar height="45px" home-icon="" :bottom-shadow = "false" bg-color="tn-type-primary_bg" :before-back="back">购物车详情 </tn-navbar>
			</view>
			
		<!-- </tn-sticky> -->
		<!--  -->
		<view class="middle-class">
			<view class="tn-p-sm tn-text-lg">供应商：{{shopClientInfoData.businessname}}</view>
			<view class="tn-pl-sm tn-pr-sm tn-pb-sm tn-text-lg">金额：<span class="tn-red-dark_text">￥{{shopClientInfoData.taxamount}}</span></view>
			<hr/>
			<view  class="scroll-view-class">
				<view class="tn-ml-sm tn-mr-sm tn-shadow-md tn-flex card-class" v-for="(item,index) in shopClientInfoData.details">
					<view class="tn-w-1-3">
						<image :src="item.imgurl" class="image-class" mode="aspectFit" @error="imgerror(index)"></image>
					</view>
					<view class="tn-w-2-3 tn-p-xs  tn-ml-sm">
						<view class="tn-text-bold tn-text">
							{{item.goodsname}}
						</view>
						<view class="tn-text-ellipsis-2 tn-text-xs">
							{{item.manufacturer}}
						</view>
						<view class="tn-text-xs">
							<!-- {{item.goodsspec}}({{item.wmsmeas}}{{item.unit}}/{{item.wmsutil}}) -->
							{{item.specunitinfo}}
						</view>
						<view class="tn-text-ellipsis-2 tn-text-xs">
							{{item.taxpriceinfo}}
						</view>
						<view class="tn-flex justify-between">
							<!-- <span class="tn-red_text tn-text-bold tn-pt-sm">￥：{{item.taxprice}}</span> -->
							<view class="input-class tn-pt-xs tn-w-3-4 tn-pr-sm">
								<tn-form-item label="数&nbsp;&nbsp;&nbsp;量:" class="tn-text-bold tn-text-sm">
									<tn-input v-model="item.num" placeholder="请输入数量" size="sm" border-color="#000000" type="number"/>
								</tn-form-item>
								<tn-form-item label="价&nbsp;&nbsp;&nbsp;格:" class="tn-text-bold tn-text-sm">
									<tn-input v-model="item.taxprice" placeholder="请输入价格" size="sm" border-color="#000000" type="text" inputmode="decimal"  min="0" max="999999" step="0.01" pattern="\d+(\.\d{1,2})?"/>
								</tn-form-item>
							</view>
						</view>
						<view class="" style="display: flex; justify-content: flex-end;">
							<tn-button type="danger" class="tn-mr" @click="delShopping(item,index)">删除</tn-button>
							<tn-button type="success" class="tn-mr" @click="modifyShopping(item,index)">修改</tn-button>
						</view>
						
					</view>
				</view>
			</view>
			
			 
			<view class="bottom-buttons">
				<view class="">
					<tn-button type="success" size="xl" @click="doTurnAround">继续添加</tn-button>
				</view>
				<view class="">
					<tn-button type="danger" size="xl" @click="toNavigate">去提交</tn-button>
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted,watch  } from 'vue'
	import { EventBus } from '@/mitt/EventBus.js';
	import { postCall  } from '@/api/index.js'
	import { toastMessage } from '@/utils/toast.js'
	import Big from 'big.js';
	const procName = "PROC_APP_DO_SHOPPING";
	const shopClientInfoData = reactive({});
	let noneGoodsImageUrl = ref("");
	onMounted(()=>{
		const tempShopClientInfo = uni.getStorageSync("PLANSHOPCLIENTINFO");
		Object.assign(shopClientInfoData,tempShopClientInfo);
		console.log(shopClientInfoData);
		const httpUrl = uni.getStorageSync("HTTP");
		noneGoodsImageUrl.value  =  httpUrl+'/static/none.png';
	})
	
	const imgerror = (index)=>{
		if(shopClientInfoData.details.length>0){
			shopClientInfoData.details[index].imgurl = noneGoodsImageUrl.value;
		}
	}
	
	let back = (val) =>{
		EventBus.emit('planShopClientInfo',val);
		// uni.navigateBack();
		
		// uni.setStorageSync("index",2);

		return true;
		// uni.setStorageSync("index",2);
		// EventBus.emit('shopClientInfo',val);
		// return false;
	}
	
	const doTurnAround = ()=>{
		uni.navigateTo({
			url: '/pages/purplan/plan'
		});
	}
	
	const delShopping=(val,index)=>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "PLAN_DELETE";
		params["P_ID"] = val.id;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					toastMessage("删除成功！");
					shopClientInfoData.details.splice(index,1);
					compShopping();
				}
			}
			
		})
	}
	
	const compShopping=()=>{
		let taxAmount = 0
		for(let i = 0;i<shopClientInfoData.details.length;i++){
			// taxAmount = taxAmount + shopClientInfoData.details[i].taxamount;
			taxAmount = new Big(taxAmount).plus(new Big(shopClientInfoData.details[i].taxamount))
		}
		// taxAmount = taxAmount.toFixed(2);
		shopClientInfoData.taxamount = taxAmount;
	}
	
	const modifyShopping=(val,index)=>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "MODIFY_PLAN";
		params["P_TAXPRICE"] = val.taxprice;
		params["P_NUM"] = val.num;
		params["P_ID"] = val.id;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					toastMessage("修改成功！");
					console.log(val.wmsmeas);
					// val.taxamount = new Big(parseFloat(new Big(val.num).times(val.wmsmeas))).times(new Big(val.taxprice));
					val.taxamount = new Big(parseFloat(new Big(val.num).times(new Big(val.taxprice))));
					console.log(val.taxamount);
					compShopping();
				}
			}
			
		})
	}
	
	let toNavigate = () =>{
		uni.setStorageSync("SHOPCLIENTINFO",shopClientInfoData);
		uni.navigateTo({
			url: '/pages/purplan/settle'
		})
	}
	
	// let toNavigate = () =>{
	// 	console.log(shopClientInfoData)
	// 	// uni.navigateTo({
	// 	// 	url: '/pages/shop/settle'
	// 	// })
	// 	let params = {};
	// 	params["P_PROC_NAME"] = procName;
	// 	params["P_ACTION"] = "PLAN_SAVE";	
	// 	params["P_ADDRESS"] = shopClientInfoData.address;
	// 	params["P_SUPPLIERSID"] = shopClientInfoData.businessid;
	// 	postCall(params).then(res=>{
	// 		if(res){
	// 			if(res.code===200){
	// 				toastMessage("保存成功！");
	// 				uni.navigateTo({
	// 					url: '/pages/purplan/plan'
	// 				});
	// 			}
	// 		}
			
	// 	})
	// }
	
</script>

<style scoped>
.header-class{
	height: 17vh !important;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #333;
	color: #fff;
	padding: 10px 0;
	text-align: center;
	z-index: 999	
}
.image-class{
	width: 100%;
	height: 100%;
}
.card-class{
	position: relative;
}

.bottom-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #fff; /* 设置底部背景色 */
	padding: 10px; /* 设置内边距 */
	display: flex;
	justify-content: space-between;
	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 设置底部阴影 */
	padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
	height: 8vh;
}

.middle-class{
	margin-top: 17vh;
}
.scroll-view-class{
	padding-bottom: 8.5vh;
}
</style>
